<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">订单支付</block>
		</cu-custom>
		<view class="pay-info">
			<view class="">
				待支付
			</view>
			<view class="text-price text-colorP">
				20.00
			</view>
		</view>
		<view class="chance">
			<view class="chance-item" v-for="(item,index) in chanceList" :key="index" :data-enum="item.enum" @click="changeChanceNew">
				<image class="c_img" :src="item.icon" mode=""></image>
				<view class="label">
					{{item.label}}
				</view>
				<view class="istruth" :style="[{border: item.istruth?'':'solid 1rpx #efefef'}]">
					<image v-if="item.istruth" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/istruth.png"
					 mode=""></image>
				</view>
			</view>
		</view>

		<view class="submmit bg-colorP">
			确认支付
		</view>
	</view>
</template>

<script>
	export default ({
		data() {
			return {
				CustomBar: this.CustomBar,
				chanceList: [{
					enum: 'weixin',
					label: '微信支付',
					icon: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/weixin-pay.png',
					istruth: true
				}, {
					enum: 'zhifubao',
					label: '支付宝支付',
					icon: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/zhifubao-pay.png',
					istruth: false
				}, {
					enum: 'yue',
					label: '余额支付',
					icon: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/yue-pay.png',
					istruth: false
				}]
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		methods: {
			changeChanceNew(e) {
				var Enum = e.currentTarget.dataset.enum
				var result = this.chanceList.filter(item => item.enum == Enum)
				this.chanceList.forEach(item => {
					item.istruth = false
					if (result[0].enum == item.enum) {
						item.istruth = true
					}
				})
			}
		}
	})
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style scoped>
	.pay-info {
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 300rpx;
		justify-content: center;
		align-items: center;
	}

	.pay-info>view:nth-child(1) {
		color: #333;
		font-size: 35rpx;
		margin-bottom: 30rpx;
	}

	.pay-info>view:nth-child(2) {
		font-size: 70rpx;
	}

	.chance {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.chance-item {
		display: flex;
		align-items: center;
		padding: 50rpx 0;
		border-bottom: solid 1rpx #efefef;
	}

	.chance-item .c_img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.chance-item .label {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		flex: 1;
	}

	.chance-item .istruth {
		width: 40rpx;
		height: 40rpx;
		box-sizing: border-box;
		border-radius: 100%;

	}

	.chance-item .istruth image {
		width: 100%;
		height: 100%;
	}

	.submmit {
		width: 702rpx;
		height: 98rpx;
		border-radius: 8rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 98rpx;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		margin-left: -351rpx;
	}
</style>
